<template>
<div class="site-settings views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">添加员工</div>
        <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right" width="500">
                <el-form-item label="登录账号" prop="user_name">
                    <el-input :disabled="isFormEdit" maxlength="20" v-model.trim="formFormatData.formData.user_name">
                    </el-input>
                    <div class="form-help">输入登录账号,长度不超过20个字符</div>
                </el-form-item>
                <el-form-item label="员工姓名" prop="real_name">
                    <el-input v-model="formFormatData.formData.real_name"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="store_role_id">
                    <el-select v-model="formFormatData.formData.store_role_id" placeholder="请选择">
                        <el-option v-for="item in employeeOptions" :key="item.store_role_id" :label="item.name" :value="item.store_role_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-if="!hiddenPsw" v-model.trim="formFormatData.formData.password">
                        <el-button v-if="hiddenCel" slot="append" @click="hiddenPsw = true">取消</el-button>
                    </el-input>
                    <el-button style="font-size:14px;" v-if="hiddenPsw" type="text" @click="hiddenPsw = false">修改</el-button>
                    <div class="form-help">输入字母加数字的密码</div>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="formFormatData.formData.is_use">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" type="primary" @click="formFormatSubmit({ router: { type: 'replace', path: '/permission/employeeManagement', code: 1 }})">保存</el-button>
        <router-link tag="span" to="/permission/employeeManagement">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  staffAddEdit,
  staffOldEdit,
  addStoreUserGetRoleList
} from '@/api/setting'
// import {
//   regPhone
// } from '@/utils/regular'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'EmployeeManagementAdd',
  components: {

  },
  created() {
    this.getList()
  },
  data() {
    // var mobile = (rule, value, callback) => {
    //   if (!regPhone(value)) {
    //     return callback(new Error('注册手机号格式不正确'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      roledata: [],
      hiddenPsw: false,
      hiddenCel: false,
      employeeOptions: [],
      formFormatData: {
        key: 'Employee',
        api: {
          editForm: {
            api: staffOldEdit,
            params: {
              id: ''
            },
            redirect: 'store_user_id'
          },
          submitForm: staffAddEdit
        },
        formData: {
          real_name: '',
          user_name: '',
          password: '',
          is_use: 1,
          store_role_id: ''
        },
        rules: {
          user_name: [{
            required: true,
            message: '请输入登录账号',
            trigger: 'blur'
          }],
          real_name: [{
            required: true,
            message: '请输入员工姓名',
            trigger: 'blur'
          },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          store_role_id: [{
            required: true,
            message: '请选择角色名称',
            trigger: 'change'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    getList() {
      addStoreUserGetRoleList().then(response => {
        const {
          data: {
            data: formData = {}
          }
        } = response
        this.employeeOptions = formData
      })
    },
    formFormatCallBack(data, type) {
      console.log(this.$refs['Employee'])
      if (type === 'editForm') {
        this.hiddenPsw = true
        this.hiddenCel = true
        this.formFormatData.rules.password.splice({
          required: false,
          message: '请输入密码',
          trigger: 'blur'
        })
      }
    }
  }
}
</script>
